@function toRem($px){
        @return ($px/750)*100vw
}
body,html{
    padding: 0;
    margin: 0;
    margin-bottom: toRem(80);
}
@mixin top_bottom{
    position: fixed;
    height: toRem(130);
    left: 0;
    right: 0;
    .swiper{
        transition: all 0.3s ease;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        flex-wrap:nowrap;
        .swiper-item{
            display:flex;
            align-items: center;
            justify-content: center;
            padding: 0 toRem(20);
           
            .swiper-img-avator{
                    width: toRem(110);
                    height: toRem(80);
                    border-radius: toRem(7);
                    margin-left: toRem(32);
            }   
            .swiper-img-avator-circle{
                    width: toRem(80);
                    height: toRem(80);
                    border-radius: 50%;
                    margin-left: toRem(32);
            }
            .swiper-button{
                width: toRem(110);
                height: toRem(50);
                line-height: toRem(50);
                text-align: center;
                border-radius: toRem(32);
                margin-right: toRem(20);
                background-color: red;
                color: white;
                font-size: toRem(22);
            }
            .swiper-text-dark{
                font-size: toRem(25);
                color: white;
                margin: 0 toRem(15);
                flex: 1;
                // 通过自适应盒子，显示两行多余的 。。。代替
                display: -webkit-box;
                //显示两行
                -webkit-line-clamp: 2;
                // 朝向 vertical 垂直
                -webkit-box-orient:vertical;
                -webkit-box-flex: 1; // 兄弟之间的比例
                overflow: hidden;
            }
            .swiper-text-light{
                font-size: toRem(25);
                color: black;
                flex: 1;
                margin: 0 toRem(10);
                display: -webkit-box;
                //显示两行
                -webkit-line-clamp: 2;
                // 朝向 vertical 垂直
                -webkit-box-orient:vertical;
                -webkit-box-flex: 1; // 兄弟之间的比例
                overflow: hidden;
            }
        }
    
      
    }
    
    .swiper-dots{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: toRem(0);
        width: toRem(120);
        height: toRem(20);
        display: flex;
        justify-content: space-around;
        .swiper-dots-item{
            width: toRem(20);
            height: toRem(5);
            border-radius: 10px;
            border: 1px solid #ccc;
            background-color: white;
         
        }
        .swiper-dot-active{
            background-color: red;
        }
    }
   
}
.swiper-top{
    @include top_bottom;
    top: 0
}
.swiper-bottom{
    @include top_bottom;
    bottom: 0;
}.swiper-dark{
    background-color: rgba(0, 0, 0, 0.856);
}
.swiper-light{
    background-color: #fff;
}